<template>
  <section class="one">
    <p>我是一号</p>
    <ul>
      <li v-for="(product, index) of products" :key="index">
        <p>{{product.name}}</p>
        <span>{{product.price}}</span>
      </li>
    </ul>
    <br/>
    <p>改变后的数据</p>
    <ul>
      <li v-for="(product, index) of setProducts" :key="index">
        <p>{{product.name}}</p>
        <span>{{product.price}}</span>
      </li>
    </ul>
    <button  class="btn btn-info" @click="reducePrice(4)">商品降价</button>
    &nbsp;&nbsp;
    <button  class="btn btn-info" @click="addPrice()">商品加价</button>
    &nbsp;&nbsp;
    <button  class="btn btn-info" @click="addPriceAsync()">异步商品加价</button>
  </section>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
export default {
  name: 'ProductOne',
  computed: {
    ...mapState(['products']), // 获取数据
    ...mapGetters(['setProducts']) // 获取改变后的数据
  },
  methods: {
    reducePrice (num) {
      this.$store.commit('reducePrice', num) // 商品降价
    },
    ...mapMutations(['addPrice']), // 商品升价
    ...mapActions(['addPriceAsync']) // 异步加价
  }
}
</script>

<style lang="stylus" scoped>
  .one
    margin-bottom 30px
    padding: 10px 20px
    background lavenderblush
    ul
      padding 0
      list-style none
      display flex
      width 100%
      text-align center
      li
        width 25%
        margin-right 10px
        margin-top 10px
        padding 20px
        background-color: #D1E4FF
        font-size 35px
        .price
          font-weight 600
          color #860CEB
          display block
</style>
